<template>
  <div id="app">
    <Header></Header>
    <transition mode="out-in" :name="rrr">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import Header from "@/components/Header"
export default {
  components: {
    Header
  },
  data(){
    return {
      rrr:'aaa'
    }
  },
  watch:{
    $route(new1,old){
      console.log(new1.path);
      if(new1.path==="/animation01"){
        this.rrr='aaa1';
      }
    }
  }
}
</script>
<style>
  *{
    padding: 0;
    margin: 0;
  }
  html,body,#app{
    width: 100%;
    height: 100%;
  }
  .aaa-enter-active,.aaa-leave-active{
    transition: all .3s;
  }
  .aaa-enter,.aaa-leave-to{
    opacity: 0;
  }
  .aaa-enter-to,.aaa-leave{
    opacity: 1;
  }

  .aaa1-enter-active,.aaa1-leave-active{
    transition: all .3s;
  }
  .aaa1-enter,.aaa1-leave-to{
    opacity: 0;
    transform: translate(200px,200px);
  }
  .aaa1-enter-to,.aaa1-leave{
    opacity: 1;
  }

</style>
